
<template>
  <a-modal
      :title="form.id ? '编辑' : '添加'"
      width="800px"
      :open="visibleFlag"
      @cancel="onClose"
      :maskClosable="false"
      :destroyOnClose="true"
  >
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 8 }" >

          <a-row>
                <a-col :span="12" v-show="false">
                      <a-form-item label="ID"  name="id">
                        <a-input-number style="width: 100%" v-model:value="form.id" placeholder="ID" />
                      </a-form-item>
                </a-col>
                <a-col :span="12">
                      <a-form-item label="渠道名称"  name="name">
                        <a-input style="width: 100%" v-model:value="form.name" placeholder="渠道名称" />
                      </a-form-item>
                </a-col>
                <a-col :span="12">
                      <a-form-item label="所属干渠"  name="parentId">
                        <!-- <a-input-number style="width: 100%" v-model:value="form.parentId" placeholder="所属干渠" /> -->
                        <a-tree-select
                          v-model:value="form.parentId"
                          show-search
                          style="width: 100%"
                          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                          placeholder="所属干渠"
                          tree-default-expand-all
                          :tree-data="treeData"
                          tree-node-filter-prop="name"
                          :field-names="{
                            children: 'children',
                            label: 'name',
                            value: 'id',
                          }"
                        >
                        </a-tree-select>
                      </a-form-item>
                </a-col>
                <a-col :span="12">
                      <a-form-item label="所在地理位置"  name="location">
                        <a-input style="width: 100%" v-model:value="form.location" placeholder="渠道所在地理位置" />
                      </a-form-item>
                </a-col>
                <a-col :span="12">
                      <a-form-item label="起点坐标描述"  name="startPoint">
                        <a-input style="width: 100%" v-model:value="form.startPoint" placeholder="渠道起点坐标或描述" />
                      </a-form-item>
                </a-col>
                <a-col :span="12">
                      <a-form-item label="终点坐标描述"  name="endPoint">
                        <a-input style="width: 100%" v-model:value="form.endPoint" placeholder="渠道终点坐标或描述" />
                      </a-form-item>
                </a-col>
                <a-col :span="12">
                      <a-form-item label="渠道总长度(m)"  name="length">
                        <a-input-number style="width: 100%" v-model:value="form.length" placeholder="渠道总长度，单位米(m)" />
                      </a-form-item>
                </a-col>
                <a-col :span="12">
                      <a-form-item label="建成日期"  name="constructionDate">
                        <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="form.constructionDate" style="width: 100%" placeholder="建成日期"/>
                      </a-form-item>
                </a-col>
                <a-col :span="12">
                      <a-form-item label="上次检查时间"  name="lastInspection">
                        <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="form.lastInspection" style="width: 100%" placeholder="上次检查时间"/>
                      </a-form-item>
                </a-col>
                <a-col :span="12">
                      <a-form-item label="下次检查时间"  name="nextMaintenanceDate">
                        <a-date-picker valueFormat="YYYY-MM-DD" v-model:value="form.nextMaintenanceDate" style="width: 100%" placeholder="下次检查时间"/>
                      </a-form-item>
                </a-col>
                <a-col :span="12">
                      <a-form-item label="灌溉容量(m³/h)"  name="designCapacity">
                        <a-input-number style="width: 100%" v-model:value="form.designCapacity" placeholder="设计灌溉容量，单位立方米/小时(m³/h)" />
                      </a-form-item>
                </a-col>
                <a-col :span="12">
                      <a-form-item label="灌溉面积(ha)"  name="servingArea">
                        <a-input-number style="width: 100%" v-model:value="form.servingArea" placeholder="服务灌溉面积，单位公顷(ha)" />
                      </a-form-item>
                </a-col>
                <!-- <a-col :span="12">
                      <a-form-item label="负责人"  name="farmerGroup">
                        <a-input style="width: 100%" v-model:value="form.farmerGroup" placeholder="负责管理的农民组织或个人" />
                      </a-form-item>
                </a-col> -->
                <a-col :span="12">
                      <a-form-item label="是否在用"  name="activeFlag">
                        <a-select v-model:value="form.activeFlag" style="width: 100%" placeholder="是否在用
                        ">
                          <a-select-option :value="1">是</a-select-option>
                          <a-select-option :value="0">否</a-select-option>
                        </a-select>
                      </a-form-item>
                </a-col>
                <a-col :span="24">
                      <a-form-item label="备注"  name="notes" :label-col="{ span: 4 }">
                        <a-textarea style="width: 100%" v-model:value="form.notes" placeholder="备注" :auto-size="{ minRows: 2, maxRows: 5 }" />
                      </a-form-item>
                </a-col>
                <!-- <a-col :span="12">
                      <a-form-item label="更新时间"  name="updateTime">
                        <a-date-picker show-time valueFormat="YYYY-MM-DD HH:mm:ss" v-model:value="form.updateTime" style="width: 100%" placeholder="更新时间" />
                      </a-form-item>
                </a-col>
                <a-col :span="12">
                      <a-form-item label="创建时间"  name="createTime">
                        <a-date-picker show-time valueFormat="YYYY-MM-DD HH:mm:ss" v-model:value="form.createTime" style="width: 100%" placeholder="创建时间" />
                      </a-form-item>
                </a-col> -->
          </a-row>
    </a-form>

    <template #footer>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">保存</a-button>
      </a-space>
    </template>
  </a-modal>
</template>
<script setup>
  import { reactive, ref, nextTick } from 'vue';
  import _ from 'lodash';
  import { message } from 'ant-design-vue';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { canalsApi } from '/@/api/main/basic/canals-api';
  import { smartSentry } from '/@/lib/smart-sentry';
  
  // 树的根节点


  // 干渠下拉数据
  const treeData = ref([]);

  // ------------------------ 事件 ------------------------

  const emits = defineEmits(['reloadList']);

  // ------------------------ 显示与隐藏 ------------------------
  // 是否显示
  const visibleFlag = ref(false);

  async function show(rowData) {
    // 获取干渠树 

    let queryResult = await canalsApi.canalsTree();
    treeData.value = queryResult.data;
    console.log(treeData.value)
    Object.assign(form, formDefault);
    if (rowData && !_.isEmpty(rowData)) {
      Object.assign(form, rowData);
    }
    visibleFlag.value = true;
    nextTick(() => {
      formRef.value.clearValidate();
    });
  }

  function onClose() {
    Object.assign(form, formDefault);
    visibleFlag.value = false;
  }

  // ------------------------ 表单 ------------------------

  // 组件ref
  const formRef = ref();

  const formDefault = {
          id: undefined,
              id: undefined, //ID
              name: undefined, //渠道名称
              parentId: undefined, //干渠id
              location: undefined, //渠道所在地理位置
              startPoint: undefined, //渠道起点坐标或描述
              endPoint: undefined, //渠道终点坐标或描述
              length: undefined, //渠道总长度，单位米(m)
              constructionDate: undefined, //建成日期
              lastInspection: undefined, //上次检查时间
              nextMaintenanceDate: undefined, //下次检查时间
              designCapacity: undefined, //设计灌溉容量，单位立方米/小时(m³/h)
              servingArea: undefined, //服务灌溉面积，单位公顷(ha)
              farmerGroup: undefined, //负责管理的农民组织或个人
              activeFlag: undefined, //是否在用
              notes: undefined, //备注
              updateTime: undefined, //更新时间
              createTime: undefined, //创建时间
  };

  let form = reactive({ ...formDefault });

  const rules = {
                  // id: [{ required: true, message: 'ID 必填' }],
                  name: [{ required: true, message: '渠道名称 必填' }],
                  parentId: [{ required: true, message: '请选择所属干渠' }],
                  // designCapacity: [{ required: true, message: '设计灌溉容量，单位立方米/小时(m³/h) 必填' }],
                  // servingArea: [{ required: true, message: '服务灌溉面积，单位公顷(ha) 必填' }],
                  // farmerGroup: [{ required: true, message: '负责管理的农民组织或个人 必填' }],
                  // activeFlag: [{ required: true, message: '是否在用 必填' }],
                  // updateTime: [{ required: true, message: '更新时间 必填' }],
                  // createTime: [{ required: true, message: '创建时间 必填' }],
  };
  

  // 点击确定，验证表单
  async function onSubmit() {
    try {
      await formRef.value.validateFields();
      save();
    } catch (err) {
      message.error('参数验证错误，请仔细填写表单数据!');
    }
  }

  // 新建、编辑API
  async function save() {
    SmartLoading.show();
    try {
      if (form.id) {
        await canalsApi.update(form);
      } else {
        await canalsApi.add(form);
      }
      message.success('操作成功');
      emits('reloadList');
      onClose();
    } catch (err) {
      smartSentry.captureError(err);
    } finally {
      SmartLoading.hide();
    }
  }

  defineExpose({
    show,
  });
</script>
